<route>
    {
        meta: {
            title: "上传个人文件"
        }
    }
    </route>

<script setup name="personalExampleUpload">
import useFileStore from '@/store/modules/file'
import { nextTick, ref } from 'vue'
import { ElInput } from 'element-plus'
import Editor from '@/components/Editor/index.vue'
const route = useRoute()

const router = useRouter()

const fileStore = useFileStore()

const formRef = ref()
const form = ref({
    name: '',
    file: [],
    describe: '',
    labels: '',
    type: '1'
})
// 类型
// const radio1 = ref('1')
// 规则
const rules = ref({
    name: [
        { required: true, message: '请输入文件名称', trigger: 'blur' }
    ],
    // file: [
    //     { required: true, message: '请选择文件', trigger: 'blur' }
    // ],
    describe: [
        { required: false, message: '请输入描述', trigger: 'blur' }
    ],
    type: [
        { required: true, message: '请选择类型', trigger: 'blur' }
    ]
})

const inputValue = ref('')
const thisfileInfo = ref({
    upLoadUrl: 'http://101.68.222.195:8080/files/' + route.query.id + '/upload'
    // 请求网址: http://101.68.222.195:8080/files/personal

})
const dynamicTags = ref(['公安', '医院', '学校'])
const inputVisible = ref(false)
const InputRef = ref()

const handleClose = tag => {
    dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
    inputVisible.value = true
    nextTick(() => {
        InputRef.value.input.focus()
    })
}

const handleInputConfirm = () => {
    if (inputValue.value) {
        dynamicTags.value.push(inputValue.value)
    }
    inputVisible.value = false
    inputValue.value = ''
}
function onUpLoad(param) {
    const file = param.file
    form.value.file = file

}

function onSubmit() {

    formRef.value.validate(valid => {
        if (valid) {
            fileStore.updateFile(Object.assign({ parentId: route.query.id, file: form.value.file })).then(() => {

                ElMessage({
                    type: 'success',
                    message: '上传成功'
                })
                router.push({
                    name: 'personalExampleIndex'

                })
            }).catch(() => {})

        }
    })
}
function onCancel() {
    router.go(-1)
}

</script>

<template>
    <div>
        <page-main>
            <el-row>
                <el-col :md="24" :lg="12">
                    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
                        <el-form-item label="文件名称" prop="name">
                            <el-input v-model="form.name" placeholder="请输入文件名称" />
                        </el-form-item>
                        <!-- <el-form-item>
                            <Editor />
                        </el-form-item> -->
                        <el-form-item label="选择文件" prop="file">
                            <file-upload
                                v-model="form.file"
                                action=""
                                :http-request="onUpLoad"
                                auto-upload="true"
                                :limit="1"
                            />
                        </el-form-item>
                        <el-form-item label="描述" prop="describe">
                            <el-input v-model="form.describe" type="describe" placeholder="请输入文件描述" />
                        </el-form-item>
                        <el-form-item label="标签" prop="labels">
                            <el-tag
                                v-for="tag in dynamicTags"
                                :key="tag"
                                class="mx-1"
                                closable
                                :disable-transitions="false"
                                @close="handleClose(tag)"
                            >
                                {{ tag }}
                            </el-tag>
                            <el-input
                                v-if="inputVisible"
                                ref="InputRef"
                                v-model="inputValue"
                                class="ml-1 w-20"
                                size="small"
                                @keyup.enter="handleInputConfirm"
                                @blur="handleInputConfirm"
                            />
                            <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
                                自定义标签
                            </el-button>
                        </el-form-item>
                        <el-form-item label="类型" prop="type">
                            <el-radio-group v-model="form.type" class="ml-4">
                                <el-radio label="1">文稿</el-radio>
                                <el-radio label="2">视频</el-radio>
                                <el-radio label="3">音频</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </page-main>
        <fixed-action-bar>
            <el-button type="primary" size="large" @click="onSubmit">上传</el-button>
            <el-button type="primary" size="large" @click="onCancel">取消</el-button>
        </fixed-action-bar>
    </div>
</template>
